<template>
	<view class="">
		<view class="product-bg">
			<swiper :current="currentIdx" :indicator-dots="false" :autoplay="autoplay" :interval="3000" :duration="1000"
				@change="change">
				<swiper-item v-for="(item,index) in videoBox">
					<view class="swiper-item">
						<video :src="item" style="width: 100%;height: 90%;"></video>
					</view>
				</swiper-item>
				<swiper-item v-for="(item,index) in imageBox">
					<view class="swiper-item">
						<view class="isUp" v-if="isUp == 2" >
							<image src="@/static/images/cjflag.png" mode="widthFix" style="width: 80%;"
								></image>
						</view>
						<image @click="previewImg" :src="item" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="acea-row row-middle types" v-if="imageBox.length&&videoBox.length">
				<view class="type" :class="type=='video'?'type-on':''" @click.stop="changeType('video')">视频</view>
				<view class="type" :class="type=='image'?'type-on':''" @click.stop="changeType('image')">图片</view>
			</view>
			<view class="acea-row row-middle row-between bottom-text">
				<view class="">
					编号：{{code?code:'暂无'}}
					更新时间：{{ updateTime }}
				</view>
				<view class="acea-row row-middle">
					<image src="../../static/images/white_img.png" mode=""></image>
					<view>{{currentIdx+1}}/{{currents}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'product-bg',
		props: {
			images: {
				type: Array,
				default: () => {
					return []
				}
			},
			videos: {
				type: Array,
				default: () => {
					return []
				}
			},
			updateTime: {
				type: String,
				default: ''
			},
			code: {
				type: String,
				default: ''
			},
			isUp: {
				type: [String, Number],
				default: ''
			},
			autoplay:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentIdx: 0,
				type: 'video',
				videoBox: [],
				imageBox: []
			}
		},
		computed: {
			currents() {
				return this.videoBox.length + this.imageBox.length
			}
		},
		watch: {
			images: {
				handler() {
					console.log('image', this.images, this.separateVideosAndImages(this.images))
					// this.images.length<1&&this.images.push(this.$noImageShow);
					let re = this.separateVideosAndImages(this.images);
					this.imageBox = re.imageArray;
					this.videoBox = re.videoArray;
					if (this.imageBox.length < 1 && this.videoBox.length < 1) {
						this.imageBox.push(this.$noImageShow);
					}
					let emitImg = []
					if(this.imageBox.length < 1){
						emitImg.push(this.$noImageShow);
					}
					this.$emit('initImg', emitImg, this.videoBox)
				},
				immediate: false,
				deep: true
			}
		},
		methods: {
			separateVideosAndImages(inputArray) {
				let videoArray = [];
				let imageArray = [];

				const videoExtensions = /\.(mp4|avi|mov)$/i;
				const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;

				inputArray.forEach(item => {
					const extension = item.match(/\.[0-9a-z]+$/i) ? item.match(/\.[0-9a-z]+$/i)[0] : '';
					if (extension.match(videoExtensions)) {
						videoArray.push(item);
					} else if (extension.match(imageExtensions)) {
						imageArray.push(item);
					}
				});
				if (imageArray.length < 1 && videoArray.length < 1 && inputArray.length > 0) {
					imageArray = inputArray;
				}
				return {
					videoArray,
					imageArray
				};
			},
			changeType(type) {
				this.type = type;
				if (type == 'image' && this.videoBox.length) {
					this.currentIdx = this.videoBox.length
				} else if (type == 'video') {
					this.currentIdx = 0
				}
			},
			change(e) {
				this.currentIdx = e.detail.current;
				if (this.videoBox.length && this.currentIdx == this.videoBox.length) {
					this.type = 'image'
				} else if (this.videoBox.length && this.currentIdx < this.videoBox.length) {
					this.type = 'video'
				}
			},
			previewImg() {
				let that = this;
				console.log("this.imageBox",this.imageBox);
				this.$emit('catImg');
				// 预览图片
				uni.previewImage({
					urls: that.imageBox,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.product-bg {
		width: 100%;
		height: 652rpx;
		background: #ffffff;
		position: relative;

		swiper,
		swiper-item,
		.swiper-item {
			width: 100%;
			height: 100%;

			.isUp {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 100%;
				background: rgba(0, 0, 0, 0.1);
			}
		}


		video {
			display: block;
			width: 100%;
			height: 100%;
		}

		.bottom-text {
			padding: 0 32rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 78rpx;
			background: rgba(10, 2, 2, 0.4);

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.types {
		width: 160rpx;
		height: 40rpx;
		border-radius: 30rpx;
		background: #ffffff;
		position: absolute;
		bottom: 88rpx;
		left: 50%;
		margin-left: -80rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		overflow: hidden;

		.type {
			width: 50%;
			line-height: 40rpx;
		}

		.type-on {
			border-radius: 30rpx;
			background: rgba(238, 33, 45, 1);
			color: #ffffff;
		}
	}
</style>